<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>Dojo box constraint test</title>
	<style type="text/css">
		@import "../../resources/dojo.css";
		@import "dndDefault.css"; 

		body {
			padding: 1em;
		}

		.moveable {
			background: #FFFFBF;
			border: 1px solid black;
			width: 300px;
			padding: 10px 20px;
			margin: 0;
			cursor: pointer;
		}
	</style>
	<script type="text/javascript" src="../../dojo.js" data-dojo-config="isDebug: true"></script>
	<!--
	<script type="text/javascript" src="../../dnd/move.js"></script>
	-->
	<script type="text/javascript">
		require(["dojo/aspect", "dojo/dnd/move", "dojo/parser", "dojo/topic", "dojo/domReady!"], function(aspect, move, parser, topic){

			parser.parse();

			var m5, m6;

			m5 = new move.boxConstrainedMoveable("moveable5", {box: {l: 100, t: 100, w: 500, h: 500}});
			m6 = new move.boxConstrainedMoveable("moveable6", {box: {l: 100, t: 100, w: 500, h: 500}, within: true});

			// system-wide topics
			topic.subscribe("/dnd/move/start", function(node){
				console.debug("Start move", node); 	
			});
			topic.subscribe("/dnd/move/stop", function(node){
				console.debug("Stop move", node); 	
			});

			// watching a particular moveable instance
			aspect.after(m5, "onDndMoveStart", function(mover){
				console.debug("Start moving m5 with this mover:", mover); 	
			}, true);
			aspect.after(m5, "onDndMoveStop", function(mover){
				console.debug("Stop moving m5 with this mover:", mover); 	
			}, true);
		});

	</script>
</head>
<body>
	<h1>Dojo box constraint test</h1>
	<div class="moveable" id="moveable5"><strong>Paragraph restricted to (100,100:500,500) box:</strong> Donec ac odio sed pede aliquet auctor. Donec et lectus. Praesent feugiat ultrices enim. Morbi lectus. Donec vestibulum posuere libero. Donec quam enim, nonummy a, auctor vitae, placerat id, massa. Vivamus vulputate luctus nibh. Donec dolor orci, sagittis ac, pretium sed, ornare sit amet, pede. Vestibulum leo justo, pellentesque sit amet, tristique sed, tempor eu, felis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam scelerisque velit vel sem. Curabitur vulputate. Morbi pretium porta dui.</div>
	<div class="moveable" id="moveable6"><strong>Paragraph restricted to (100,100:500,500) box, it cannot go outside of this box:</strong> In hac habitasse platea dictumst. Etiam rhoncus, leo quis hendrerit vestibulum, ipsum felis porta massa, vitae posuere nunc lorem ac enim. Nam neque turpis, aliquet quis, sollicitudin sit amet, dapibus sed, eros. Duis volutpat porttitor velit. Vivamus nibh metus, iaculis eget, malesuada eget, facilisis id, lorem. Sed turpis. Vestibulum aliquam mauris. Integer malesuada tellus vel neque. In hac habitasse platea dictumst. Aliquam at lectus. Maecenas nonummy cursus nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi imperdiet purus eu ipsum. Curabitur sapien felis, euismod eu, dapibus vel, tempor vitae, pede. Suspendisse blandit. Nulla imperdiet. Duis placerat nulla ultricies sem. In in mi nec ipsum molestie tempor. Sed scelerisque.</div>

	<script type="dojo/require">
		move: "dojo/dnd/move"
	</script>
	<div class="moveable" data-dojo-type="move.boxConstrainedMoveable" box="{l: 100, t: 100, w: 500, h: 500}"><strong>Marked up paragraph restricted to (100,100:500,500) box:</strong> Donec ac odio sed pede aliquet auctor. Donec et lectus. Praesent feugiat ultrices enim. Morbi lectus. Donec vestibulum posuere libero. Donec quam enim, nonummy a, auctor vitae, placerat id, massa. Vivamus vulputate luctus nibh. Donec dolor orci, sagittis ac, pretium sed, ornare sit amet, pede. Vestibulum leo justo, pellentesque sit amet, tristique sed, tempor eu, felis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam scelerisque velit vel sem. Curabitur vulputate. Morbi pretium porta dui.</div>
</body>
</html>
